<script setup lang="ts">

</script>

<template>
  <!-- 二级路由出口 -->
  <div class="layout-container">
    <router-view></router-view>

    <div class="bottom-menu">
      <router-link to="/" class="menu-item">
        <i class="icon-home"></i>
        <span>首页</span>
      </router-link>
      <router-link to="/list" class="menu-item">
        <i class="icon-list"></i>
        <span>列表页</span>
      </router-link>
      <router-link to="/notification" class="menu-item">
        <i class="icon-notification"></i>
        <span>通知页</span>
      </router-link>
      <router-link to="/profile" class="menu-item">
        <i class="icon-user"></i>
        <span>我的</span>
      </router-link>
    </div>
  </div>
</template>

<style>
.layout-container {
  padding-bottom: 60px; /* 为底部菜单留出空间 */
}

.bottom-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333333;
  font-size: 12px;
}

.menu-item i {
  font-size: 24px;
  margin-bottom: 4px;
}

.menu-item.router-link-active {
  color: #007bff;
}

</style>